// Defines typography placeholders (https://sass-lang.com/documentation/style-rules/placeholder-selectors)
// These placeholders are safer to use with @extend as they don't get included
// in the final CSS output and help us avoid duplication.

@mixin list-styles($margin) {
  $list-margin: px-to-rem($margin);
  list-style: none;
  margin-left: $list-margin;
  padding: 0;
  position: relative;
  @include media-query('lg') {
    max-width: calc(100% - #{$list-margin * 2});
  }
}

%type {
  &--headline {
    @extend %heading-link-container;
    @include apply-utility('font', 'google-sans');
    @include apply-utility('weight', 'regular');
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed;
  }

  &--var-large {
    @extend %type--headline;
    font-size: 10vw;
    line-height: 1.2em;
    
    @include media-query('md') {
      font-size: 6vw;
      line-height: 1.2em;
    }

    @include media-query('lg') {
      font-size: 5vw;
      line-height: 1.2em;
    }
  }

  &--var-small {
    @extend %type--headline;
    font-size: 8vw;
    line-height: 1.2em;
    
    @include media-query('md') {
      font-size: 5vw;
      line-height: 1.2em;
    }

    @include media-query('lg') {
      font-size: 4vw;
      line-height: 1.2em;
    }
  }

  &--h1 {
    @extend %type--headline;
    @include flex-font((36px 40px), (48px 56px), (60px 72px));
  }

  &--h2 {
    @extend %type--headline;
    @include flex-font((28px 40px), (40px 48px), (48px 56px));
  }

  &--h3 {
    @extend %type--headline;
    @include flex-font((24px 32px), (32px 40px), (36px 44px));
  }

  // Cards use an h3 for their title text, but they only use the SM and MD
  // font-sizes. On larger screens they continue to use the MD size.
  &--h3-card {
    @extend %type--headline;
    @include flex-font((24px 32px), (32px 40px), (32px 40px));
  }

  &--h4 {
    @extend %type--headline;
    @include flex-font((18px 28px), (28px 36px), (28px 36px));
  }

  &--h5 {
    @extend %type--headline;
    @include flex-font((16px 28px), (20px 28px), (20px 28px));
  }

  // Twitter cards use an h5 for their date text, but they only use the smallest
  // size.
  &--h5-card {
    @extend %type--headline;
    @include font-setup(16px, 24px);
  }

  &--h6 {
    @extend %type--headline;
    @include apply-utility('weight', 'medium');
    @include flex-font((14px 24px), (16px 28px), (16px 28px));
  }

  &--footer {
    @extend %type--headline;
    @include apply-utility('weight', 'medium');
    @include font-setup(16px, 28px);
  }

  &--cta {
    @extend %type--headline;
    @include apply-utility('weight', 'medium');
    @include font-setup(16px, 24px);
  }

  &--eyebrow {
    @extend %type--headline;
    @include apply-utility('weight', 'medium');
    @include apply-utility('case', 'upper');
    @include font-setup(14px, 20px);
  }

  &--base {
    @include apply-utility('font', 'base');
    @include apply-utility('weight', 'regular');
    @include font-setup(16px, 28px);
    text-rendering: optimizeSpeed;
  }

  &--large {
    @extend %type--base;
    @include font-setup(18px, 28px);
  }

  &--small {
    @extend %type--base;
    @include font-setup(14px, 20px);
  }

  &--caption {
    @extend %type--base;
    @include font-setup(14px, 24px);
  }

  &--label {
    @extend %type--base;
    @include apply-utility('weight', 'medium');
    @include font-setup(12px, 16px);
  }

  &--xsmall {
    @extend %type--base;
    @include font-setup(12px, 20px);
  }

  &--blockquote {
    @extend %type--headline;
    @include flex-font((24px 32px), (32px 40px), (32px 40px));
    text-align: center;

    > p::before {
      content: '“';
    }

    > p::after {
      content: '”';
    }

    > cite {
      display: block;
      margin-top: 1em;
    }
  }

  &--cite {
    @extend %type--cta;
    @include apply-utility('weight', 'regular');
    font-style: normal;
  }

  &--list {
    @include list-styles(48px);
  }

  &--list-item {
    margin-top: 0.5em;

    &:first-of-type {
      margin-top: 0;
    }

    &::before {
      $bullet-size: px-to-rem(8px);
      background: get-color('grey-700');
      border-radius: 50%;
      content: '';
      display: inline-flex;
      height: $bullet-size;
      margin-left: -#{$bullet-size * 3};
      margin-right: $bullet-size * 2;
      position: absolute;
      transform: translateY(px-to-rem(10px));
      width: $bullet-size;
    }
  }

  &--ordered-list {
    @include list-styles(56px);
    counter-reset: ol-step-counter;
  }
  
  &--ordered-list-item {
    counter-increment: ol-step-counter;
    margin-top: 0.5em;

    &:first-of-type {
      margin-top: 0;
    }

    &::before {
      $bullet-size: px-to-rem(24px);
      @extend %type--caption;
      background: get-color('grey-100');
      border-radius: 50%;
      content: counter(ol-step-counter);
      display: inline-flex;
      flex-shrink: 0;
      height: $bullet-size;
      justify-content: center;
      margin-left: -#{$bullet-size * 5/3};
      margin-right: $bullet-size * 2/3;
      position: absolute;
      transform: translateY(px-to-rem(3px));
      width: $bullet-size;
    }
  }

  &--dt {
    font-weight: 600;
    margin-left: 1em;
  }

  &--dd {
    margin-left: 2em;
    margin-top: 0;

    + dt,
    + .type--dt {
      margin-top: 0.5em;
    }
  }

  &--code {
    @include apply-utility('font', 'mono');
    @include font-setup(15px, 26px, false, false);
  }

  &--full-bleed {
    margin-left: -#{$article-padding};
    margin-right: -#{$article-padding};
  }

  &--hairline {
    background-color: var(--color-hairline);
  }
}
